<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app"></div>
</body>
<script>
	const vnode = {
		type: 'div',
		props: {
			class: 'test',
		},
		children: 'hello world'
	}
	function render(oldVnode, newVnode, container) {
		if (!oldVnode) {
			mount(newVnode, container);
		}
	}

	function mount(vnode, container) {
		const el = document.createElement(vnode.type);
		for (const key in vnode.props) {
			el.setAttribute(key, vnode.props[key]);
		}
		if (typeof vnode.children === 'string') {
			el.textContent = vnode.children;
		} else if (Array.isArray(vnode.children)) {
			vnode.children.forEach(child => {
				mount(child, el);
			});
		}
		container.appendChild(el);
	}

	render(null, vnode, document.getElementById('app'));
</script>
</html>